<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
const username = ref('')
const password = ref('')
const router = useRouter()
const login = async () => {
   let res = await axios.post('login', { name: username.value, password: password.value })
   if (res.data.code === 200) {
      console.log(res);
      localStorage.setItem('accessToken', res.data.accessToken)
      localStorage.setItem('refreshToken', res.data.refreshToken)
      localStorage.setItem('user', JSON.stringify(res.data.user))
      router.push('/nav')
   } else {
      ElMessage({
         message: '用户名或密码错误！',
         type: 'error',
      })
   }

}
const zhuce = async () => {
   router.push('/register')

}
const navphone = async () => {
   router.push('/phonelogin')
}
</script>

<template>
   <div>
      <div class="imgs">
         <img src="@/assets/login/1.png" id="img1" alt="">
         <img src="@/assets/login/three.png" id="img2" alt="">
      </div>

      <div class="down">
         <input type="text" id="input1" placeholder="请输入账户" v-model="username">
         <input type="password" id="input2" placeholder="请输入密码" v-model="password" />
         <button id="loginBtn" @click='login'>登录</button>
         <div class="litte">
            <button id="forgetBtn">忘记密码</button>
            <button id="noPhoneBtn">还没有账号</button>
            <button id="registerBtn" @click="zhuce">注册</button>
         </div>
         <div id="other">第三方登录</div>
         <div class="buttons">
            <button id="wechatBtn">
               <img @click="$router.push('/wechatlogin')" src="@/assets/login/wechat.svg" alt="">
            </button>
            <button id="phoneBtn" @click="navphone">
               <img src="@/assets/login/phone.svg" alt="">
            </button>
            <button id="appleBtn">
               <img src="@/assets/login/apple.svg" alt="">
            </button>
            <button id="alipayBtn">
               <img src="@/assets/login/alipay.svg" alt="">
            </button>
         </div>
         <div class="agree">
            <input type="radio" />
            <span id="iagree">我已阅读并同意</span>
            <span id="items">《用户协议》《隐私政策》</span>
         </div>
      </div>

   </div>


</template>

<style scoped lang="less">
.imgs {
   position: relative;
   width: 390px;
   height: 286px;

   #img1 {
      width: 390px;
      height: 286px;
   }

   #img2 {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 390px;
      height: 64px;
   }
}

.down {
   position: relative;
   width: 390px;
   height: 558px;
   line-height: 20px;
   background-color: rgba(255, 255, 255, 1);
   color: rgba(16, 16, 16, 1);
   font-size: 14px;
   text-align: center;
   font-family: Roboto;

   #input1 {
      margin-top: 21px;
      width: 305px;
      height: 56px;
      line-height: 20px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(183, 171, 171, 1);
      font-size: 14px;
      text-align: left;
      box-shadow: 0px 0px 0px 0px rgba(170, 170, 170, 1);
      font-family: Microsoft Yahei;
      border: 0px solid rgba(187, 187, 187, 1);
   }

   #input2 {
      margin-top: 9px;
      width: 305px;
      height: 56px;
      line-height: 20px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(183, 171, 171, 1);
      font-size: 14px;
      text-align: left;
      box-shadow: 0px 0px 0px 0px rgba(170, 170, 170, 1);
      font-family: Microsoft Yahei;
      border: 0px solid rgba(187, 187, 187, 1);
   }

   #loginBtn {
      margin-top: 25px;
      width: 300px;
      height: 60px;
      line-height: 20px;
      border-radius: 4px;
      background-color: rgba(73, 144, 224, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 18px;
      text-align: center;
      box-shadow: 2px 2px 0px 0px rgba(172, 168, 168, 1);
      font-family: Microsoft Yahei;
      border: 1px solid rgba(73, 144, 224, 1);
   }

   .litte {
      margin-top: 17px;

      #forgetBtn {
         position: absolute;
         left: 47px;
         width: 58px;
         height: 24px;
         line-height: 17px;
         background-color: rgba(255, 255, 255, 1);
         color: rgba(183, 171, 171, 1);
         font-size: 12px;
         text-align: left;
         font-family: Roboto;
         border: 0px solid rgba(255, 0, 0, 0);
      }

      #noPhoneBtn {
         position: absolute;
         left: 246px;
         width: 69px;
         height: 32px;
         line-height: 17px;
         background-color: rgba(255, 255, 255, 1);
         color: rgba(183, 171, 171, 1);
         font-size: 12px;
         text-align: center;
         font-family: Roboto;
         border: 0px solid rgba(255, 0, 0, 0);
      }

      #registerBtn {
         position: absolute;
         right: 31px;
         width: 29px;
         height: 32px;
         line-height: 17px;
         background-color: rgba(255, 255, 255, 1);
         color: rgba(73, 144, 224, 1);
         font-size: 12px;
         text-align: center;
         font-family: Roboto;
         border: 0px solid rgba(255, 0, 0, 0);
      }
   }

   #other {
      margin-top: 156px;
      margin-left: 151px;
      width: 70px;
      height: 20px;
      line-height: 20px;
      color: rgba(108, 108, 108, 1);
      font-size: 14px;
      text-align: center;
      font-family: PingFangSC-regular;
   }

   .buttons {
      margin-top: 12px;

      #wechatBtn {
         margin: 0 20px;
         width: 50px;
         height: 50px;
         line-height: 20px;
         background-color: rgba(255, 255, 255, 1);
         color: rgba(16, 16, 16, 1);
         font-size: 14px;
         text-align: center;
         font-family: Roboto;
         border: 1px solid rgba(217, 217, 217, 1);
         border-radius: 50%;

         img {
            width: 50px;
            height: 50px;
         }
      }

      #phoneBtn {
         margin: 0 20px;
         width: 50px;
         height: 50px;
         line-height: 20px;
         background-color: rgba(255, 255, 255, 1);
         color: rgba(16, 16, 16, 1);
         font-size: 14px;
         text-align: center;
         font-family: Roboto;
         border: 0;
         border-radius: 50%;

         img {
            position: relative;
            top: 15px
         }



      }

      #appleBtn {
         margin: 0 20px;
         width: 50px;
         height: 50px;
         line-height: 20px;
         background-color: rgba(255, 255, 255, 1);
         color: rgba(16, 16, 16, 1);
         font-size: 14px;
         text-align: center;
         font-family: Roboto;
         border: 1px solid rgba(217, 217, 217, 1);
         border-radius: 50%;

         img {
            width: 50px;
            height: 50px;
         }
      }

      #alipayBtn {
         margin: 0 20px;
         width: 50px;
         height: 50px;
         line-height: 20px;
         background-color: rgba(255, 255, 255, 1);
         color: rgba(16, 16, 16, 1);
         font-size: 14px;
         text-align: center;
         font-family: Roboto;
         border: 1px solid rgba(217, 217, 217, 1);
         border-radius: 50%;

         img {
            width: 50px;
            height: 50px;
         }
      }
   }

   .agree {
      margin-top: 20px;
      margin-left: 20px;

      input {
         width: 20px;
         height: 20px;
      }

      #iagree {
         position: relative;
         bottom: 5px;
         margin-left: 5px;
         width: 100px;
         height: 20px;
         line-height: 20px;
         color: rgba(153, 153, 153, 1);
         font-size: 14px;
         text-align: left;
         font-family: PingFangSC-regular;
      }

      #items {
         position: relative;
         bottom: 5px;
         width: 166px;
         height: 20px;
         line-height: 20px;
         color: rgba(34, 159, 248);
         font-size: 14px;
         text-align: left;
         font-family: PingFangSC-regular;
      }
   }
}
</style>